CSS @property விதி: தனிப்பயன் பண்பு வகை வரையறையின் சக்தியை கட்டவிழ்த்தல்

CSS உலகம் தொடர்ந்து வளர்ந்து வருகிறது, மேலும் சமீபத்திய மற்றும் சக்திவாய்ந்த சேர்த்தல்களில் ஒன்று @property விதி. இந்த விதி தனிப்பயன் பண்பு வகைகளை வரையறுப்பதற்கான ஒரு வழிமுறையை வழங்குகிறது, இது உங்கள் CSS-க்கு அதிக கட்டுப்பாட்டையும் நெகிழ்வுத்தன்மையையும் கொண்டுவருகிறது மற்றும் மேலும் நுட்பமான அனிமேஷன்கள், மேம்படுத்தப்பட்ட தீமிங் திறன்கள் மற்றும் ஒட்டுமொத்தமாக ஒரு வலுவான CSS கட்டமைப்பிற்கான கதவுகளைத் திறக்கிறது. இந்த கட்டுரை @property விதியை ஆழமாக ஆராய்ந்து, அதன் தொடரியல், திறன்கள் மற்றும் நடைமுறை பயன்பாடுகளை உலகளாவிய பார்வையாளர்களை மனதில் கொண்டு ஆராயும்.

CSS தனிப்பயன் பண்புகள் (மாறிகள்) என்றால் என்ன?

@property விதிக்குள் நுழைவதற்கு முன்பு, CSS தனிப்பயன் பண்புகளைப் புரிந்துகொள்வது அவசியம், அவை CSS மாறிகள் என்றும் அழைக்கப்படுகின்றன. தனிப்பயன் பண்புகள் உங்கள் CSS-க்குள் மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளை வரையறுக்க உங்களை அனுமதிக்கின்றன, இது உங்கள் ஸ்டைல்ஷீட்களை மேலும் பராமரிக்கக்கூடியதாகவும், புதுப்பிக்க எளிதாகவும் ஆக்குகிறது. அவை --variable-name தொடரியலைப் பயன்படுத்தி அறிவிக்கப்பட்டு, var() செயல்பாட்டைப் பயன்படுத்தி அணுகப்படுகின்றன.

உதாரணம்:

:root {
  --primary-color: #007bff; /* உலகளவில் வரையறுக்கப்பட்ட முதன்மை நிறம் */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

இந்த எடுத்துக்காட்டில், --primary-color மற்றும் --secondary-color ஆகியவை தனிப்பயன் பண்புகளாகும். உங்கள் முழு வலைத்தளத்திலும் முதன்மை நிறத்தை மாற்ற வேண்டுமென்றால், நீங்கள் அதை ஒரே ஒரு இடத்தில் - :root செலக்டரில் புதுப்பித்தால் போதும்.

அடிப்படை தனிப்பயன் பண்புகளின் வரம்பு

தனிப்பயன் பண்புகள் மிகவும் பயனுள்ளதாக இருந்தாலும், அவற்றுக்கு ஒரு குறிப்பிடத்தக்க வரம்பு உள்ளது: அவை அடிப்படையில் சரங்களாக (strings) கருதப்படுகின்றன. அதாவது, ஒரு தனிப்பயன் பண்பு என்ன வகையான மதிப்பைக் கொண்டுள்ளது (எ.கா., எண், நிறம், நீளம்) என்பதை CSS இயல்பாக அறியாது. உலாவி வகையை ஊகிக்க முயற்சித்தாலும், இது எதிர்பாராத நடத்தைக்கு வழிவகுக்கும், குறிப்பாக அனிமேஷன்கள் மற்றும் மாற்றங்களின் போது. உதாரணமாக, ஒரு நிறத்தைக் கொண்ட தனிப்பயன் பண்பை அனிமேட் செய்ய முயற்சிப்பது எதிர்பார்த்தபடி வேலை செய்யாமல் போகலாம், அல்லது வெவ்வேறு உலாவிகளில் சீராக வேலை செய்யாமல் போகலாம்.

@property விதியை அறிமுகப்படுத்துதல்

@property விதி இந்த வரம்பை சரிசெய்கிறது, ஒரு தனிப்பயன் பண்பின் வகை, தொடரியல், ஆரம்ப மதிப்பு மற்றும் மரபுரிமை நடத்தை ஆகியவற்றை வெளிப்படையாக வரையறுக்க உங்களை அனுமதிக்கிறது. இது தனிப்பயன் பண்புகளுடன் வேலை செய்வதற்கு, குறிப்பாக அவற்றை அனிமேட் செய்யும் போது அல்லது மாற்றும் போது, மிகவும் வலுவான மற்றும் கணிக்கக்கூடிய வழியை வழங்குகிறது.

@property விதியின் தொடரியல்

@property விதியின் அடிப்படை தொடரியல் பின்வருமாறு:

@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

விதியின் ஒவ்வொரு பகுதியையும் உடைத்துப் பார்ப்போம்:

• --property-name: இது நீங்கள் வரையறுக்கும் தனிப்பயன் பண்பின் பெயர். இது இரண்டு ஹೈஃபன்களுடன் (--) தொடங்க வேண்டும்.
• syntax: இது தனிப்பயன் பண்பின் மதிப்பின் எதிர்பார்க்கப்படும் வகையை வரையறுக்கிறது. இது தனிப்பயன் பண்பிற்கான செல்லுபடியாகும் மதிப்பு(களை) விவரிக்கும் ஒரு சரம் ஆகும். பொதுவான தொடரியல் மதிப்புகள் பின்வருமாறு:
• *: எந்த மதிப்பையும் பொருத்துகிறது. தொடரியல் குறிப்பிடப்படவில்லை என்றால் இது இயல்புநிலையாக இருக்கும். இது வகை சரிபார்ப்பைத் தவிர்ப்பதால் இதை கவனமாகப் பயன்படுத்தவும்.
• <color>: செல்லுபடியாகும் எந்த CSS நிற மதிப்பையும் பொருத்துகிறது (எ.கா., #ff0000, rgb(255, 0, 0), red).
• <length>: செல்லுபடியாகும் எந்த CSS நீள மதிப்பையும் பொருத்துகிறது (எ.கா., 10px, 2em, 50%).
• <number>: எந்த எண் மதிப்பையும் பொருத்துகிறது (எ.கா., 1, 3.14, -2.5).
• <integer>: எந்த முழு எண் மதிப்பையும் பொருத்துகிறது (எ.கா., 1, -5, 0).
• <angle>: எந்த கோண மதிப்பையும் பொருத்துகிறது (எ.கா., 45deg, 0.5rad, 100grad).
• <time>: எந்த நேர மதிப்பையும் பொருத்துகிறது (எ.கா., 1s, 500ms).
• <percentage>: எந்த சதவீத மதிப்பையும் பொருத்துகிறது (எ.கா., 50%, 100%).
• <image>: எந்த பட மதிப்பையும் பொருத்துகிறது (எ.கா., url(image.jpg), linear-gradient(...)).
• <string>: எந்த சரம் மதிப்பையும் பொருத்துகிறது (இரட்டை அல்லது ஒற்றை மேற்கோள்குறிக்குள்).
• பல வகைகளை அனுமதிக்க | ஐப் பயன்படுத்தி தொடரியல் விளக்கிகளை இணைக்கலாம் (எ.கா., <length> | <percentage>).
• மேலும் சிக்கலான தொடரியலை வரையறுக்க நீங்கள் ரெகுலர் எக்ஸ்பிரஷன்களைப் பயன்படுத்தலாம். தொடரியல் அவற்றை குறிப்பிட்டால், CSS-wide முக்கிய வார்த்தைகளான inherit, initial, unset, மற்றும் revert ஆகியவற்றை செல்லுபடியாகும் மதிப்புகளாக இது பயன்படுத்துகிறது, தொடரியல் வகைக்கு பொதுவாக அனுமதிக்கப்படாவிட்டாலும் கூட. எடுத்துக்காட்டு: '\d+px' என்பது '10px', '200px' போன்ற மதிப்புகளை அனுமதிக்கிறது, ஆனால் '10em' அல்ல. பேக்ஸ்லாஷின் இரட்டை எஸ்கேப்பிங்கைக் கவனிக்கவும்.
• inherits: இது ஒரு பூலியன் மதிப்பு (true அல்லது false) ஆகும், இது தனிப்பயன் பண்பு அதன் மதிப்பை அதன் பெற்றோர் உறுப்பிலிருந்து பெற வேண்டுமா என்பதைக் குறிக்கிறது. இயல்புநிலை மதிப்பு false ஆகும்.
• initial-value: இது தனிப்பயன் பண்பின் ஆரம்ப மதிப்பை வரையறுக்கிறது. இது ஒரு உறுப்பில் வெளிப்படையாக அமைக்கப்படாவிட்டால், அந்த பண்பு கொண்டிருக்கும் மதிப்பாகும். வரையறுக்கப்பட்ட syntax உடன் பொருந்தக்கூடிய ஒரு செல்லுபடியாகும் ஆரம்ப மதிப்பை வழங்குவது முக்கியம். ஆரம்ப மதிப்பு வழங்கப்படாவிட்டால், மற்றும் பண்பு மரபுரிமையாக பெறப்படாவிட்டால், அதன் ஆரம்ப மதிப்பு செல்லாத பண்பு மதிப்பாக இருக்கும்.

@property விதியின் நடைமுறை எடுத்துக்காட்டுகள்

நிஜ உலக சூழ்நிலைகளில் @property விதியை எவ்வாறு பயன்படுத்தலாம் என்பதை விளக்க சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்.

எடுத்துக்காட்டு 1: ஒரு தனிப்பயன் நிறத்தை அனிமேட் செய்தல்

நிலையான CSS மாற்றங்களைப் பயன்படுத்தி நிறங்களை அனிமேட் செய்வது சில நேரங்களில் தந்திரமானதாக இருக்கலாம். @property விதி இதை மிகவும் எளிதாக்குகிறது.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* ஹோவர் செய்யும்போது பச்சை நிறத்திற்கு மாற்றவும் */
}

இந்த எடுத்துக்காட்டில், நாம் --brand-color என்ற தனிப்பயன் பண்பை வரையறுத்து, அதன் தொடரியல் <color> என்று குறிப்பிடுகிறோம். நாம் #007bff (ஒரு நீல நிறத்தின் சாயல்) என்ற ஆரம்ப மதிப்பையும் அமைக்கிறோம். இப்போது, .element ஹோவர் செய்யப்படும்போது, பின்னணி நிறம் நீலத்திலிருந்து பச்சைக்கு மென்மையாக மாறுகிறது.

எடுத்துக்காட்டு 2: ஒரு தனிப்பயன் நீளத்தை அனிமேட் செய்தல்

நீளங்களை (எ.கா., அகலம், உயரம்) அனிமேட் செய்வது @property விதிக்கான மற்றொரு பொதுவான பயன்பாடு ஆகும்.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

இங்கே, நாம் --element-width என்ற தனிப்பயன் பண்பை வரையறுத்து, அதன் தொடரியல் <length> என்று குறிப்பிடுகிறோம். ஆரம்ப மதிப்பு 100px ஆக அமைக்கப்பட்டுள்ளது. .element ஹோவர் செய்யப்படும்போது, அதன் அகலம் 100px இலிருந்து 200px க்கு மென்மையாக மாறுகிறது.

எடுத்துக்காட்டு 3: ஒரு தனிப்பயன் முன்னேற்றப் பட்டையை உருவாக்குதல்

@property விதியைப் பயன்படுத்தி, அனிமேஷன் மீது அதிக கட்டுப்பாட்டுடன் தனிப்பயன் முன்னேற்றப் பட்டைகளை உருவாக்கலாம்.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

இந்த எடுத்துக்காட்டில், நாம் --progress என்ற தனிப்பயன் பண்பை வரையறுக்கிறோம், இது முன்னேற்ற சதவீதத்தைக் குறிக்கிறது. பின்னர், --progress-இன் மதிப்பின் அடிப்படையில் முன்னேற்றப் பட்டையின் அகலத்தைக் கணக்கிட calc() செயல்பாட்டைப் பயன்படுத்துகிறோம். .progress-bar உறுப்பில் data-progress பண்பை அமைப்பதன் மூலம், நாம் முன்னேற்ற அளவைக் கட்டுப்படுத்தலாம்.

எடுத்துக்காட்டு 4: தனிப்பயன் பண்புகளுடன் தீமிங்

@property விதி, வெவ்வேறு தீம்களுக்கு இடையில் மாறும்போது மிகவும் நம்பகமான மற்றும் கணிக்கக்கூடிய நடத்தையை வழங்குவதன் மூலம் தீமிங்கை மேம்படுத்துகிறது. ஒரு எளிய இருண்ட/ஒளி தீம் சுவிட்சுக்கான பின்வரும் உதாரணத்தைக் கவனியுங்கள்:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* ஒளி தீம் இயல்புநிலை */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* ஒளி தீம் இயல்புநிலை */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* இருண்ட தீம் */
    --text-color: #ffffff;
}

@property விதியுடன் --bg-color மற்றும் --text-color ஆகியவற்றை வரையறுப்பதன் மூலம், வரையறுக்கப்பட்ட வகைகள் இல்லாத அடிப்படை தனிப்பயன் பண்புகளைப் பயன்படுத்துவதை விட தீம்களுக்கு இடையிலான மாற்றம் மென்மையாகவும் நம்பகமானதாகவும் இருக்கும்.

உலாவி இணக்கத்தன்மை

2023-இன் பிற்பகுதியில், Chrome, Firefox, Safari, மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் @property விதிக்கான உலாவி ஆதரவு பொதுவாக நன்றாக உள்ளது. இருப்பினும், Can I Use (caniuse.com) போன்ற வலைத்தளங்களில் சமீபத்திய உலாவி இணக்கத்தன்மை தகவல்களைச் சரிபார்ப்பது எப்போதும் ஒரு நல்ல யோசனையாகும், உங்கள் இலக்கு பார்வையாளர்களுக்கு இந்த அம்சத்திற்கு போதுமான ஆதரவு இருப்பதை உறுதிசெய்ய.

@property விதியை ஆதரிக்காத பழைய உலாவிகளை நீங்கள் ஆதரிக்க வேண்டுமென்றால், நீங்கள் JavaScript உடன் அம்சக் கண்டறிதலைப் பயன்படுத்தி மாற்றுத் தீர்வுகளை வழங்கலாம். உதாரணமாக, உலாவி CSS.registerProperty (@property உடன் தொடர்புடைய JavaScript API) ஆதரிக்கிறதா என்பதைக் கண்டறிய JavaScript-ஐப் பயன்படுத்தலாம், பின்னர் அது ஆதரிக்கப்படாவிட்டால் மாற்று ஸ்டைல்களைப் பயன்படுத்தலாம்.

@property விதியைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

@property விதியைப் பயன்படுத்தும்போது மனதில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• தொடரியலை கவனமாக வரையறுக்கவும்: உங்கள் தனிப்பயன் பண்புக்கு மிகவும் பொருத்தமான தொடரியல் மதிப்பைத் தேர்வு செய்யவும். இது பிழைகளைத் தடுக்கவும், உங்கள் CSS எதிர்பார்த்தபடி செயல்படுவதை உறுதி செய்யவும் உதவும்.
• ஆரம்ப மதிப்புகளை வழங்கவும்: உங்கள் தனிப்பயன் பண்புகளுக்கு எப்போதும் ஒரு initial-value-ஐ வழங்கவும். இது ஒரு உறுப்பில் வெளிப்படையாக அமைக்கப்படாவிட்டாலும், பண்புக்கு ஒரு செல்லுபடியாகும் மதிப்பு இருப்பதை உறுதி செய்கிறது.
• மரபுரிமையைக் கருத்தில் கொள்ளுங்கள்: உங்கள் தனிப்பயன் பண்பு அதன் மதிப்பை அதன் பெற்றோர் உறுப்பிலிருந்து பெற வேண்டுமா என்பதைப் பற்றி கவனமாக சிந்தியுங்கள். பெரும்பாலான சந்தர்ப்பங்களில், மரபுரிமையை இயக்குவதற்கு ஒரு குறிப்பிட்ட காரணம் இல்லாவிட்டால், inherits-ஐ false என அமைப்பது நல்லது.
• விளக்கமான பண்புப் பெயர்களைப் பயன்படுத்தவும்: உங்கள் தனிப்பயன் பண்புகளுக்கு அவற்றின் நோக்கத்தை தெளிவாகக் குறிக்கும் விளக்கமான பெயர்களைத் தேர்வு செய்யவும். இது உங்கள் CSS-ஐ மேலும் படிக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்கும். உதாரணமாக, --color என்பதற்குப் பதிலாக, --primary-button-color-ஐப் பயன்படுத்தவும்.
• முழுமையாக சோதிக்கவும்: உங்கள் CSS எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த, வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சோதிக்கவும். அனிமேஷன்கள் மற்றும் மாற்றங்களுக்கு বিশেষ கவனம் செலுத்துங்கள், ஏனெனில் இந்த பகுதிகளில் @property விதி மிகவும் தாக்கத்தை ஏற்படுத்தக்கூடும்.
• உங்கள் குறியீட்டை ஆவணப்படுத்தவும்: உங்கள் தனிப்பயன் பண்புகளின் நோக்கத்தையும் அவை எவ்வாறு பயன்படுத்தப்படுகின்றன என்பதையும் விளக்க உங்கள் CSS-இல் கருத்துகளைச் சேர்க்கவும். இது மற்ற டெவலப்பர்கள் (மற்றும் உங்கள் எதிர்கால நீங்கள்) உங்கள் குறியீட்டைப் புரிந்துகொள்வதை எளிதாக்கும்.

அணுகல்தன்மை பரிசீலனைகள்

@property விதியைப் பயன்படுத்தும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது முக்கியம். உங்கள் அனிமேஷன்கள் மற்றும் மாற்றங்கள் அறிவாற்றல் குறைபாடுகள் உள்ள பயனர்களுக்கு மிகவும் கவனத்தை சிதறடிப்பதாகவோ அல்லது குழப்பத்தை ஏற்படுத்துவதாகவோ இல்லை என்பதை உறுதிப்படுத்தவும். ஒளிரும் அல்லது அதிர்வுகளை ஏற்படுத்தும் அனிமேஷன்களைப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் இவை சில நபர்களுக்கு வலிப்புத்தாக்கங்களைத் தூண்டக்கூடும்.

மேலும், உங்கள் வண்ணத் தேர்வுகள் பார்வை குறைபாடு உள்ள பயனர்களுக்கு போதுமான வேறுபாட்டை வழங்குகின்றன என்பதை உறுதிப்படுத்தவும். உங்கள் வண்ண சேர்க்கைகள் அணுகல்தன்மை வழிகாட்டுதல்களை பூர்த்தி செய்கின்றனவா என்பதை சரிபார்க்க WebAIM Contrast Checker போன்ற கருவிகளைப் பயன்படுத்தலாம்.

உலகளாவிய பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக வலைத்தளங்கள் மற்றும் பயன்பாடுகளை உருவாக்கும்போது, கலாச்சார வேறுபாடுகள் மற்றும் உள்ளூர்மயமாக்கலைக் கருத்தில் கொள்வது முக்கியம். ஒரு உலகளாவிய சூழலில் @property விதியைப் பயன்படுத்தும்போது மனதில் கொள்ள வேண்டிய சில விஷயங்கள் இங்கே:

• உரை திசை: தளவமைப்பு அல்லது நிலைப்படுத்தலைக் கட்டுப்படுத்த தனிப்பயன் பண்புகளைப் பயன்படுத்தும்போது உரை திசையை (இடமிருந்து வலம் vs. வலமிருந்து இடம்) அறிந்திருங்கள். உங்கள் தளவமைப்பு வெவ்வேறு உரை திசைகளுக்கு சரியாக மாற்றியமைக்கப்படுவதை உறுதிசெய்ய தர்க்கரீதியான பண்புகளைப் (எ.கா., margin-left-க்கு பதிலாக margin-inline-start) பயன்படுத்தவும்.
• எண் மற்றும் தேதி வடிவங்கள்: வெவ்வேறு நாடுகளில் பயன்படுத்தப்படும் வெவ்வேறு எண் மற்றும் தேதி வடிவங்களை மனதில் கொள்ளுங்கள். உங்கள் CSS-இல் குறிப்பிட்ட வடிவங்களை ஹார்ட்கோட் செய்வதைத் தவிர்த்து, அதற்கு பதிலாக உலாவியின் இயல்புநிலை வடிவமைப்பை நம்புங்கள் அல்லது பயனரின் இருப்பிடத்திற்கு ஏற்ப எண்கள் மற்றும் தேதிகளை வடிவமைக்க JavaScript-ஐப் பயன்படுத்தவும்.
• நிற குறியீடு: வெவ்வேறு கலாச்சாரங்களில் நிறங்களுக்கு வெவ்வேறு அர்த்தங்கள் இருக்கலாம் என்பதை அறிந்திருங்கள். சில கலாச்சாரங்களில் புண்படுத்தக்கூடியதாகவோ அல்லது பொருத்தமற்றதாகவோ கருதப்படக்கூடிய நிறங்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• மொழி ஆதரவு: உங்கள் தனிப்பயன் பண்புகள் வெவ்வேறு மொழிகளுடன் சரியாக வேலை செய்வதை உறுதிப்படுத்தவும். சாத்தியமான சிக்கல்களைக் கண்டறிய உங்கள் வலைத்தளத்தை பல்வேறு மொழிகளுடன் சோதிக்கவும்.

CSS தனிப்பயன் பண்புகள் மற்றும் @property விதியின் எதிர்காலம்

@property விதி CSS-இன் பரிணாம வளர்ச்சியில் ஒரு குறிப்பிடத்தக்க படியைக் குறிக்கிறது. உலாவி ஆதரவு தொடர்ந்து மேம்படும்போது, இந்த சக்திவாய்ந்த அம்சத்திற்கான இன்னும் புதுமையான பயன்பாடுகளை நாம் எதிர்பார்க்கலாம். எதிர்காலத்தில், வரிசைகள் மற்றும் பொருள்கள் போன்ற மிகவும் சிக்கலான தரவு வகைகளை ஆதரிக்க @property விதியில் புதிய தொடரியல் மதிப்புகள் சேர்க்கப்படலாம். JavaScript உடன் சிறந்த ஒருங்கிணைப்பையும் நாம் காணலாம், இது டெவலப்பர்களை இயக்க நேரத்தில் தனிப்பயன் பண்புகளை மாறும் வகையில் உருவாக்கவும் கையாளவும் அனுமதிக்கிறது.

தனிப்பயன் பண்புகள் மற்றும் @property விதியின் கலவையானது மிகவும் மட்டுப்படுத்தப்பட்ட, பராமரிக்கக்கூடிய மற்றும் சக்திவாய்ந்த CSS கட்டமைப்பிற்கு வழி வகுக்கிறது. இந்த அம்சங்களைத் தழுவுவதன் மூலம், டெவலப்பர்கள் உலகம் முழுவதும் உள்ள பயனர்களுக்கு அணுகக்கூடிய மிகவும் நுட்பமான மற்றும் ஈர்க்கக்கூடிய வலை அனுபவங்களை உருவாக்க முடியும்.

முடிவுரை

@property விதி வலை டெவலப்பர்களுக்கு தனிப்பயன் பண்பு வகைகளை வரையறுக்க அதிகாரம் அளிக்கிறது, இது அனிமேஷன்கள், தீமிங் மற்றும் ஒட்டுமொத்த CSS கட்டமைப்பிற்கான புதிய சாத்தியங்களைத் திறக்கிறது. அதன் தொடரியல், திறன்கள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், நீங்கள் இந்த சக்திவாய்ந்த அம்சத்தைப் பயன்படுத்தி மிகவும் வலுவான, பராமரிக்கக்கூடிய மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வலை பயன்பாடுகளை உருவாக்கலாம். உலாவி ஆதரவு தொடர்ந்து வளர்ந்து வருவதால், @property விதி சந்தேகத்திற்கு இடமின்றி நவீன வலை டெவலப்பரின் கருவிப்பெட்டியில் ஒரு இன்றியமையாத கருவியாக மாறும். இந்த தொழில்நுட்பத்தைத் தழுவுங்கள், அதன் திறன்களுடன் பரிசோதனை செய்யுங்கள், மற்றும் CSS தனிப்பயன் பண்புகளின் முழு திறனையும் திறக்கவும்.

மேலும் படிக்க

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1